import React, { useEffect } from 'react';
import { Descriptions, Button } from 'antd';
import enums from '@/enums';
import Area from './Area/Area';
import { useWorkOrderLink } from './hooks';

const LINE_HEIGHT = '24px';

/**
 * 表单状态栏
 */
function AcceptanceStatusBar(props) {
    const { data = {} } = props;

    const workOrderLink = useWorkOrderLink();

    useEffect(() => {
        data.workOrderNumber && workOrderLink.run(data.workOrderNumber);
    }, [data.workOrderNumber]);

    const wrapDangerStyle = (text) => {
        return <span style={{ fontSize: 14, fontWeight: 600, color: '#E64F55' }}>{text}</span>;
    };

    const items = [
        {
            span: 4,
            label: wrapDangerStyle('验收单状态'),
            children: wrapDangerStyle(enums.ossAcceptance.acceptanceStatus.get(data.acceptanceStatus) ?? '-'),
        },
        {
            span: 4,
            label: '工单编号',
            children: data.workOrderNumber ? (
                <Button
                    style={{ padding: 0, height: LINE_HEIGHT, lineHeight: LINE_HEIGHT, border: 0 }}
                    type="link"
                    onClick={() => {
                        window.open(
                            `/ops/portal/work-order/query/existed-list/detail?id=${data.workOrderNumber}&status=query`
                        );
                    }}
                >
                    {data.workOrderNumber}
                </Button>
            ) : (
                '-'
            ),
        },
        {
            span: 4,
            label: '工单环节',
            children: workOrderLink.data?.name,
        },
        {
            span: 12,
            label: '反馈',
            children: workOrderLink.data?.remark,
        },
    ];

    const renderItem = ({ children = '-', ...item }, index) => {
        return (
            <Descriptions.Item key={index} {...item}>
                {children}
            </Descriptions.Item>
        );
    };

    return (
        <Area title="当前状态">
            <Descriptions
                column={24}
                labelStyle={{ lineHeight: LINE_HEIGHT }}
                contentStyle={{ lineHeight: LINE_HEIGHT }}
            >
                {items.map(renderItem)}
            </Descriptions>
        </Area>
    );
}

export default AcceptanceStatusBar;
